@use '../modules' as *;
@forward 'header-bar';
@forward 'views';

decoration {
  border-radius: $window_radius $window_radius 0 0;
  // lamefun trick to get rounded borders regardless of CSD use
  border-width: 0px;

  // this needs to be transparent
  // see bug #722563
  $_wm_border: if($variant=='light', rgba(0,0,0,0.05), gtkshade($borders_color, 0.86));
  $_wm_border_backdrop: if($variant=='light', rgba(0,0,0,0.02), gtkshade($borders_color, 0.7));

  box-shadow: 0 3px 8px 1px rgba(0,0,0,0.3),
              0 0 0 1px $_wm_border; //doing borders with box-shadow

  // FIXME rationalize shadows

  // this is used for the resize cursor area
  margin: 10px;

  &:backdrop {
    // the transparent shadow here is to enforce that the shadow extents don't
    // change when we go to backdrop, to prevent jumping windows.
    // The biggest shadow should be in the same order then in the active state
    // or the jumping will happen during the transition.
    box-shadow: 0 3px 8px 1px transparent,
                0 2px 6px 2px rgba(0,0,0,0.14),
                0 0 0 1px $_wm_border_backdrop;

    transition: $backdrop_transition;
  }

  .maximized &,
  .fullscreen & { border-radius: 0; box-shadow: none; }

  .tiled &,
  .tiled-top &,
  .tiled-right &,
  .tiled-bottom &,
  .tiled-left & {
    border-radius: 0;
    box-shadow: 0 0 0 1px $_wm_border,
                0 0 0 20px transparent; //transparent control workaround -- #3670

    &:backdrop { box-shadow: 0 0 0 1px $_wm_border_backdrop,
                             0 0 0 20px transparent; // #3670
    }
  }

  .popup & { box-shadow: none; }

  // server-side decorations as used by mutter
  // just doing borders, wm draws actual shadows
  $_ssd_wm_border: if($variant=='light', rgba(0,0,0,0.3), gtkshade($borders_color, 0.86));
  $_ssd_wm_border_backdrop: if($variant=='light', rgba(0,0,0,0.2), gtkshade($borders_color, 0.7));
  .ssd & { box-shadow: 0 0 0 1px $_ssd_wm_border; }
  .ssd &:backdrop { box-shadow: 0 0 0 1px $_ssd_wm_border_backdrop; }
  .ssd.maximized &,
  .ssd.maximized &:backdrop { box-shadow: none; }

  .csd.popup & {
    border-radius: $menu_radius;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2),
                0 0 0 1px gtkalpha($_wm_border, 0.9);
  }

  tooltip.csd & {
    border-radius: 5px;
    box-shadow: none;
  }

  messagedialog.csd & {
    border-radius: $window_radius;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2),
                0 0 0 1px gtkalpha($_wm_border, 0.9);
  }

  .solid-csd & {
    margin: 0;
    padding: 4px;
    background-color: $borders_color;
    border: solid 1px $borders_color;
    border-radius: 0;
    box-shadow: inset 0 0 0 5px $borders_color,
                inset 0 0 0 4px $headerbar_bg_color,
                inset 0 0 0 1px $borders_color;

    &:backdrop { box-shadow: inset 0 0 0 3px $backdrop_bg_color; }
  }
}

// Window Close button
button.titlebutton {
  padding: 2px;
  margin: 0;
  box-shadow: none;
  border: none;
  background: none;
  text-shadow: none;

  &:not(.appmenu) {
    border-radius: 9999px;
    @extend %titlebutton;
  }

  .selection-mode & {
    @extend %nobg_selected_items;
  }

  &:backdrop { -gtk-icon-shadow: none; }
}

.selection-mode headerbar button.titlebutton,
.selection-mode .titlebar button.titlebutton,
headerbar.selection-mode button.titlebutton,
.titlebar.selection-mode button.titlebutton {
  &:backdrop { -gtk-icon-shadow: none; }
}

.monospace { font-family: monospace; }
